<template>
  <div class="echart" ref="ringChart"></div>
  <div class="detail">
    <span>{{name}}</span>
    <span>{{percentage}}%</span>
    <span>{{percentageName}}</span>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref, watch, nextTick} from "vue";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);

export default defineComponent({
  props: {
    name: String,
    completed: Number,
    incomplete: Number,
    percentageName: String,
    color: String
  },
  setup(props, context) {
    const state = reactive({
      name: props.name,
      completed: props.completed,
      incomplete: props.incomplete,
      percentageName: props.percentageName,
      color: props.color,
      percentage: Math.round(props.completed/(props.completed + props.incomplete)*100) || 0,
      mychart: null
    })
    
    const ringChart = ref(null);

    watch(()=>props.completed,(val)=>{
      state.completed = val;
      state.percentage = Math.round(props.completed/(props.completed + props.incomplete)*100) || 0;
      if(val == 0 && state.incomplete == 0) {
        state.incomplete = 0.001;
      }
      renderChart()
    })
    watch(()=>props.incomplete,(val)=>{
      state.incomplete = val;
      state.percentage = Math.round(props.completed/(props.completed + props.incomplete)*100) || 0;
      if(val == 0 && state.completed == 0) {
        state.incomplete = 0.001;
      }
      renderChart()
    })

    nextTick(()=>{
      renderChart();
    })

    const renderChart = ()=> {
      if(state.incomplete == 0 && state.completed == 0) {
        state.incomplete = 0.001;
      }
      state.mychart && state.mychart.dispose();
      state.mychart = echarts.init(ringChart.value);
      state.mychart.setOption({
        color: [state.color, '#f0f2f5'],
        series: [
          {
            name: state.name,
            type: "pie",
            radius: ["80%", "100%"],
            emphasis: {
              scale: false
            },
            avoidLabelOverlap: false,
            itemStyle: { borderColor: '#fff',borderWidth: 2},
            label: {
              show: false,
            },
            legendHoverLink: false,
            data: [
              { value: state.completed, name: "已完成", emphasis:{itemStyle:{color:state.color}}}, 
              { value: state.incomplete, name: "未完成", emphasis:{itemStyle:{color:'#f0f2f5'}}},                       
            ],
          }
        ],
      },true);
    }
    
    return {
      ...toRefs(state),
      ringChart
    }
  },
});
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
.detail {
  text-align: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  line-height: 1;
  border-radius: 50%;
  span:nth-child(1) {
    color: #333;
    font-size: 14px;
  }
  span:nth-child(2) {
    color: #333;
    font-size: 24px;
  }
  span:nth-child(3) {
    color: #666;
    font-size: 12px;
  }
}
</style>